<template>
	<div>
		<Content>
			<div class="card_content">
				<div class="about_top">
					<div class="about_top_col">
						<div class="statis">
							<div class="statis_item">
								<span><a href="">{{aid}}</a></span>
								<span>文章</span>
							</div>
							<div class="statis_item">
								<span><a href="">{{cgid}}</a></span>
								<span>分类</span>
							</div>
							<div class="statis_item">
								<span><a href="">{{tid}}</a></span>
								<span>标签</span>
							</div>
						</div>
					</div>
					<div class="about_top_col">
						<img src="../assets/images/head.jpg" style="width:100px;height:100px;border-radius:3rem;">
					</div>
					<div class="about_top_col">
						<div class="social_link">
							<div class="statis_item">
								<span><a href="">📫</a></span>
								<span>邮箱</span>
							</div>
							<div class="statis_item">
								<span><a href="">🐶</a></span>
								<span>Github</span>
							</div>
							<div class="statis_item">
								<span><a href="">📱</a></span>
								<span>微信</span>
							</div>
						</div>
					</div>
				</div>
				<div class="about_title">
					<iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tc&skin=pitaya" frameborder="0" width="350" height="24" allowtransparency="true"></iframe>
					<h3>关于我</h3>
				</div>
				<div class="about_content">
					<p>2021年我从郑州一个普通二本学校毕业，没有考研，英语四级没过，这两年来我一直在反思我自己以后向做什么，都没有想好，直到毕业我也不知道日后的人生方向是如何，比起哪些清楚地知道自己想要什么的人，我是羡慕的。</p>
					<p>我还仍然记得，大一的时候想从事软件类工作，每次有了课余的时间，我都会把时间用在学习专业课上面，C/C++，Web前端，Linux都认真学习并练习，但是我学的越多，越发现自己知道的越少。</p>
					<p>到了大三的时候，我学习了Python爬虫相关的知识，学习到了Web爬虫原理，并做了一些看课脚本，打卡程序，从中也赚取了三五百块，付出也是相当辛苦的，每天有人找我，不论是一大早还是深夜我都要爬起来给他们解决问题，持续了几个月，我觉得这样下去会非常累。之后我又做了一个打卡系统，使用Linux定时器，Python，Mysql，php，boootstrap做了一个可以登录查看个人信息并可以自由开启和关闭打卡的系统，便从这中繁琐中解放出来了。</p>
				</div>
			</div>
		</Content>
	</div>
</template>

<script>
import Content from '../components/Content.vue'

export default {
	name: 'Article',
	components: {
		Content,
	},
	data: function() {
		return {
			aid: 0,
			cgid: 0,
			tid: 0
		}
	},
	mounted() {
		fetch(this.url+"/article/statis",{
				method: "POST",
				headers: {"Content-Type": "application/x-www-form-urlencoded"}
		})
		.then((res) => {return res.text()})
		.then((res) => {
			res = JSON.parse(res)["data"]
			this.aid = res.aid
			this.cgid = res.cgid
			this.tid = res.tid
		})
	}
}
</script>

<style scoped>
	iframe {
		font-size: xx-large;
	}
	.content {
		margin-top: -6rem;
	}
	.card_content {
		width: 90%;
		margin: 0 auto;
		padding: 24px;
		/* border: 1px dashed #AAAAAA; */
		border-radius: 10px;
		box-shadow: 0 15px 35px rgb(50 50 93 / 10%), 0 5px 15px rgb(0 0 0 / 7%);
		color: #282c34;
		/* 背景高斯模糊 增加亮度 */
		backdrop-filter: blur(30px) brightness(110%);
		background-color: rgba(255, 255, 255, 0.1);
		text-align: center;
	}
	.about_top {
		overflow: hidden;
	}
	.about_content {
		text-align: left;
		padding: 26px;
		text-indent: 2em;
	}
	.about_top_col {
		float: left;
		width: 33.3333333333%;
	}
	.statis_item {
		display: inline-block;
		padding: 0.3rem 0.8rem;
		letter-spacing: .1rem;
	}
	.statis_item>span {
		display: block;
	}
</style>